﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>员工信息</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-table.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <script src="~/scripts/jquery-1.10.2.min.js"></script>
    <script src="~/scripts/bootstrap.min.js"></script>
    <script src="~/scripts/bootstrap-table.js"></script>
    <script src="~/scripts/bootstrap-datetimepicker.min.js"></script>
    <script src="~/scripts/locale/bootstrap-table-zh-CN.js"></script>
    <script src="~/scripts/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript">
        function initTable() {
            $("#table").bootstrapTable('destroy');
            $("#table").bootstrapTable({
                columns: [
                    { checkbox: true, visible: true },
                    { field: 'ID', title: 'ID', sortable: true, align: 'center', valign: 'middle', visible: false },
                    { field: 'EmployeeCode', title: '员工编号', align: 'center', valign: 'middle' },
                    { field: 'EmployeeName', title: '员工姓名', align: 'center', valign: 'middle' },
                    { field: 'DepartmentCode', title: '部门代码', align: 'center', valign: 'middle' },
                    { field: 'Age', title: '年龄', align: 'center', valign: 'middle' },
                    {
                        field: 'Sex', title: '性别', align: 'center', valign: 'middle',
                        formatter: function (value) {
                            var sex = { 0: "女", 1: "男" };
                            var htmStr = "";
                            if (sex[value] == "男") {
                                htmStr = "<span style='color:#fa9f00'>" + sex[value] + "</span>";
                            } else {
                                htmStr = "<span style='color:#FF0000'>" + sex[value] + "</span>"
                            }
                            return htmStr;
                        }
                    },
                    {
                        field: 'EduLevel', title: '教育水平', align: 'center', valign: 'middle',
                        formatter: eduF=function (value) {
                            var eudLevel = { 1: "小学", 2: "初中", 3: "高中", 4: "本科", 5: "硕士", 6: "博士" };
                            return eudLevel[value];
                        }
                    },
                    { field: 'Job', title: '职位', align: 'center', valign: 'middle' },
                    {
                        field: 'JoinDate', title: '入职日期', align: 'center', valign: 'middle',
                        formatter: dateF=function (value) {
                            return changeDateFormat(value);
                        }
                    },
                    { field: 'TelephoneCode', title: '联系方式', align: 'center', valign: 'middle' },
                    { field: 'Remark', title: '备注', align: 'center', valign: 'middle',width:200 },
                    {
                        field: 'ID',
                        title: '操作',
                        align: 'center',
                        valign: 'middle',
                        formatter: actionFormatter
                    },
                ],
                url: '@Url.Action("getEmployeeRecords", "Record")',
                method: 'POST',
                contentType: 'application/x-www-form-urlencoded;charset=UTF-8',//发送到服务器的数据编码类型，适用于post请求
                toolbar: '#toolbar',
                striped: true,
                cache: true,
                pagination: true,
                sortable: true,
                sortOrder: "asc",
                sidePagination: 'server',           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
                pageSize: 10,                     //每页的记录行数（*）
                pageList: [10, 25, 50, 100],
                search: false,
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列（选择显示的列）
                showRefresh: true,
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                //height: 390,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
                //cardView: true,                    //是否显示详细视图
                detailView: false,      //是否显示父子表
                paginationPreText: "上一页",
                paginationNextText: "下一页",
                //得到查询参数
                queryParams: function (params) {
                    var temp = {
                        limit: params.limit,//页面大小
                        offset: params.offset,//要跳过的页码
                        sortcolumsname: params.sort,
                        order: params.order,
                        txtEmployeeCode:$("#txtEmployeeCode").val(),
                        txtEmployeeName:$("#txtEmployeeName").val(),
                        txtDepartmentCode:$("#txtDepartmentCode").val(),
                        txtJoinDate:$("#txtJoinDate").val()
                    };
                    return temp;
                },
                //onDblClickRow: function (row) {
                //    var id = row.ID;
                //    Edit(id, "editById");
                //}
            });
        }
        //加载表格，搜索和重置
        $(function () {
            initTable();
            $("#btn-search").click(function () {
                $("#table").bootstrapTable("refresh");
            });
            $("#btn-reset").click(function () {
                $("#txtEmployeeCode").val("");
                $("#txtEmployeeName").val("");
                $("#txtDepartmentCode").val("");
                $("#txtJoinDate").val("");
                $("#table").bootstrapTable("refresh");
            });
            
            // 日历
            $('.form_datetime').datetimepicker({
                minView: "month", //选择日期后，不会再跳转去选择时分秒 
                weekStart: 1,    //一周从哪一天开始 0（星期日）到6（星期六）
                language: 'zh-CN',
                format: 'yyyy-mm-dd',
                todayBtn: true,
                todayHighlight:true,
                autoclose: true//选择一个日期后关闭当前选择器
            });
            //页面刷新时时间输入框内容清空
            $("#txtJoinDate").val("");
            //模态框关闭时清空数据
            $("body").on("hidden.bs.modal", "#Modal-Option", function () {
                $("input,textarea").val("")
                $(".form-group").removeClass("has-success").removeClass("has-error");
                $(".help-block").text("").html("&nbsp;");
            });
        });
        //操作列格式化函数
        function actionFormatter(value, row, index) {
            var id = value;
            var result = "";
            result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"optionRecords('editById','" + id + "')\" title='编辑'><span class='glyphicon glyphicon-edit'></span></a>";
            result += "&nbsp;&nbsp;<a href='javascript:;' class='btn btn-xs red' onclick=\"deleteRecords('" + id + "','deleteById')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
            return result;
        }
        //转换日期格式
        function changeDateFormat(cellval) {
            if (cellval != null) {
                var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10))
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                return date.getFullYear()+"-"+month+"-"+currentDate;
            }
        }
        //表单数据格式验证
        function Verify(name,txtlength,message) {
            var txtname = $("#" + name + "").val();
            switch (name) {
                case "employeeCode":
                case "employeeName":
                case "departmentCode":
                case "job":
                case "telephoneCode":
                case "remark":
                    if (txtname.length>txtlength) {
                        NoPass(name, message);
                    } else {
                        Pass(name);
                    }
                    break;
                case "sex":
                    if (txtname == "请选择性别") {
                        NoPass(name, message);
                    } else {
                        Pass(name);
                    }
                    break;
                case "eduLevel":
                    if (txtname == "请选择学历") {
                        NoPass(name, message);
                    } else {
                        Pass(name);
                    }
                    break;
                case "joinDate":
                    if (txtname.length <=0) {
                        NoPass(name, message);
                    } else {
                        Pass(name);
                    }
                    break;
                case "age":
                    ageNum = parseInt(txtname, 10);
                    if (ageNum<0||ageNum>120||txtname.length<=0||isNaN(txtname)) {
                        NoPass(name, message);
                    } else {
                        Pass(name);
                    }
                    break;
            }
        }
        //验证通过回调函数
        function Pass(name) {
            $("#div_" + name + "").removeClass("has-error").addClass("has-success");
            $("#" + name + "Helper").text("OK!");
        }
        //验证失败回调函数
        function NoPass(name,msg) {
            $("#div_" + name + "").addClass("has-error").removeClass("has-success");
            $("#" + name + "Helper").text(msg);
        }
        //逻辑判断进行添加或者修改操作
        function optionRecords(action,id) {
            switch (action) {
                case "add":
                    $("#Modal-Option").modal("show");
                    break;
                case "edit":
                    var opts = $("#table").bootstrapTable("getSelections");
                    if (opts.length != 1) {
                        Info("请选择有效记录");
                    } else {
                        $("#ID").val(opts[0].ID)
                        $("#employeeCode").val(opts[0].EmployeeCode);
                        $("#employeeName").val(opts[0].EmployeeName);
                        $("#departmentCode").val(opts[0].DepartmentCode);
                        $("#age").val(opts[0].Age);
                        $("#sex").val((opts[0].Sex==0?"女":"男"));
                        $("#eduLevel").val(eduF(opts[0].EduLevel));//需要调用formator函数进行格式处理
                        $("#job").val(opts[0].Job);
                        $("#joinDate").val(dateF(opts[0].JoinDate));//需要调用formator函数进行格式处理
                        $("#telephoneCode").val(opts[0].TelephoneCode);
                        $("#remark").val(opts[0].Remark);
                        $("#Modal-Option").modal("show");
                    }
                    break;
                case "editById":
                    var opts = $("#table").bootstrapTable('getRowByUniqueId', id);
                    $("#ID").val(opts.ID)
                    $("#employeeCode").val(opts.EmployeeCode);
                    $("#employeeName").val(opts.EmployeeName);
                    $("#departmentCode").val(opts.DepartmentCode);
                    $("#age").val(opts.Age);
                    $("#sex").val((opts.Sex == 0 ? "女" : "男"));
                    $("#eduLevel").val(eduF(opts.EduLevel));//需要调用formator函数进行格式处理
                    $("#job").val(opts.Job);
                    $("#joinDate").val(dateF(opts.JoinDate));//需要调用formator函数进行格式处理
                    $("#telephoneCode").val(opts.TelephoneCode);
                    $("#remark").val(opts.Remark);
                    $("#Modal-Option").modal("show");
                    break;
            }
            //在使用on绑定时，出现ajax累加提交数据情况，这里使用off方法在绑定前先解除绑定,避免重复提交
            $("#Modal-Option #btn-Option").off("click").on("click", function () {
                var sex = { "女": 0, "男": 1 };
                var eduLevel = { "小学": 1, "初中": 2, "高中": 3, "本科": 4, "硕士": 5, "博士": 6 };
                var optionArray = new Array();
                var arrays = {};
                var ID = parseInt(($("#ID").val() == "" ? "3" : $("#Modal-Option #ID").val()), 10);
                arrays.employeeCode = $("#employeeCode").val();
                arrays.employeeName = $("#employeeName").val();
                arrays.departmentCode = $("#departmentCode").val();
                arrays.age = parseInt($("#age").val(), 10);
                arrays.sex = sex[$("#sex").val()];
                arrays.eduLevel = eduLevel[$("#eduLevel").val()];
                arrays.job = $("#job").val();
                arrays.joinDate = $("#joinDate").val();
                arrays.telephoneCode = $("#telephoneCode").val();
                arrays.remark = $("#remark").val();
                optionArray.push(arrays);
                //提交验证，防止用户强行提交空值或者非法
                var elements = $("#Modal-Option .form-group");
                var classname = "";
                for (i = 0; i < elements.length; i++) {
                    classname += elements[i].className;
                }
                //alert(classname);
                if (classname.indexOf("has-error") != -1 || $("#joinDate").val() == "" || $("#age").val() == "") {
                    Info("请检查输入信息是否符合要求!");
                } else {
                    $.ajax({
                        url: "/Record/Employee_option",
                        type: "post",
                        data: {
                            "optionArray": JSON.stringify(optionArray),
                            "id": ID,
                            "option":action
                        },
                        dataType: "json",
                        success: function (data) {
                            if (data == "isok") {
                                Info("操作成功!");
                                $("#Modal-Option").modal("hide");
                                $("#table").bootstrapTable("refresh");
                            }
                        }
                    });
                }
            });
        }
        //逻辑判断对表格进行单个删除或批量删除操作
        function deleteRecords(id, action) {
            switch (action) {
                case "delete":
                    var opts = $("#table").bootstrapTable('getSelections');
                    if (opts == "") {
                        Info("请选择要删除的记录");
                    }
                    else {
                        var idArray = new Array();
                        for (var i = 0; i < opts.length; i++) {
                            idArray.push(opts[i].ID);
                        }
                    }
                    break;
                case "deleteById":
                    var opts = $("#table").bootstrapTable('getRowByUniqueId', id);
                    var idArray = new Array();
                    idArray.push(opts.ID);
                    break;
            }
            besure("是否删除所选 " + idArray.length + " 条记录？")
            $("#confirmModal #btn-yes").off("click").on("click",function(){
                $.ajax({
                    url: "/Record/Employee_delete",
                    type: "post",
                    data: {
                        "idArray": idArray
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data == "isok") {
                            Info("删除成功");
                            $("#confirmModal").modal("hide");
                            $("#table").bootstrapTable('refresh');
                        }
                    }
                });
            });
        }
        //提示对话框，一框多用
        function Info(message) {
            $("#infoModal #message").text(message);
            $("#infoModal").modal("show");
        }
        //确认对话框
        function besure(message) {
            $("#confirmModal #message").text(message);
            $("#confirmModal").modal("show");
        }
        //页面是否有滚动条
        function isScroll() { return true; };
        //防止页面抖动
        $(function () {
            $(".fade").on("show.bs.modal", function (e) {
                if (isScroll) {
                    $("body").addClass("myModal-open");
                }
            });
        });
    </script>
    <style type="text/css">
        .myModal-open {
            /*overflow-y: scroll;*/
            padding-right: 0 !important;
        }
    </style>
</head>
<body style="overflow-y:scroll;">
    <div style="padding-top:10px;padding-left:15px;padding-right:15px;">
        <div class="alert alert-success alert-dismissible fade in " role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>温馨提示：</strong> 该模块完整，用于系统功能演示...
        </div>
        <div class="form-group-sm">
            <div class="col-xs-2">
                <input type="text" id="txtEmployeeCode" class="form-control" placeholder="员工编号" />
            </div>
            <div class="col-xs-2">
                <input type="text" id="txtEmployeeName" class="form-control" placeholder="员工姓名" />
            </div>
            <div class="col-xs-2">
                <input type="text" id="txtDepartmentCode" class="form-control" placeholder="部门编号" />
            </div>
            <div class="col-xs-2">
                <div class="input-group">
                    <input type="text" class="form-control form_datetime" id="txtJoinDate" placeholder="入职日期">
                    <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
                </div>
            </div>
            <button id="btn-search" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>  搜索</button>
            <button id="btn-reset" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>  重置</button>
        </div>
        <div id="toolbar" class="btn-group-sm">
            <button id="btn-add" type="button" onclick="optionRecords('add',0)" class="btn btn-success">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增
            </button>
            <button id="btn-edit" onclick="optionRecords('edit', 0)" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 修改
            </button>
            <button id="btn-delete" onclick="deleteRecords(0, 'delete')" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除
            </button>
        </div>
        <table id="table"></table>
    </div>
    <!-- Modal(增改) -->
    <div class="modal fade" id="Modal-Option" tabindex="-1" role="dialog" aria-labelledby="EmsModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header" id="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="EmsModalLabel"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 正在编辑...</h4>
                </div>
                <div class="modal-body" id="EmsModalPreview">
                    <div style="margin-left:25px;">
                        <form class="form-inline">
                            <div class="form-group" id="div_employeeCode">
                                <label for="employeeCode" class="control-label">员工编号:</label>
                                <input type="text" class="form-control" id="employeeCode" onblur="Verify('employeeCode',10, '长度不得超过10个字符')" aria-describedby="employeeCodeHelper">
                                <small id="employeeCodeHelper" style="margin-left:65px;margin-bottom:0px;" class="help-block">&nbsp;</small>
                            </div>
                            <div class="form-group" id="div_employeeName" style="margin-left:35px;">
                                <label for="employeeName" class="control-label">员工姓名:</label>
                                <input type="text" class="form-control" id="employeeName" onblur="Verify('employeeName', 10, '长度不得超过10个字符')" aria-describedby="employeeNameHelper">
                                <small id="employeeNameHelper" style="margin-left:65px;margin-bottom:0px;" class="help-block">&nbsp;</small>
                            </div>
                            <div class="form-group" id="div_departmentCode" style="margin-top:20px;">
                                <label for="departmentCode" class="control-label">部门编号:</label>
                                <input type="text" class="form-control" id="departmentCode" onblur="Verify('departmentCode', 10, '长度不得超过10个字符')" aria-describedby="departmentCodeHelper">
                                <small id="departmentCodeHelper" style="margin-left:65px;margin-bottom:0px;" class="help-block">&nbsp;</small>
                            </div>
                            <div class="form-group" id="div_age" style="margin-left:35px;margin-top:20px;">
                                <label for="age" class="control-label">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄:</label>
                                <input type="text" class="form-control " id="age" onblur="Verify('age', 0, '年龄必须是数字且大小不得超过120')"  aria-describedby="ageHelper">
                                <small id="ageHelper" style="margin-left:60px;margin-bottom:0px;" class="help-block">&nbsp;</small>
                            </div>
                            <div class="form-group" id="div_sex" style="margin-top:20px;">
                                <label for="sex" class="control-label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</label>
                                <select class="form-control" style="width:172px" id="sex" onblur="Verify('sex', 0, '请选择有效性别')">
                                    <option>请选择性别</option>
                                    <option>男</option>
                                    <option>女</option>
                                </select>
                                <small id="sexHelper" style="margin-left:65px;margin-bottom:0px;" class="help-block">&nbsp;</small>
                            </div>
                            <div class="form-group" id="div_eduLevel" style="margin-left:35px;margin-top:20px;">
                                <label for="eduLevel" class="control-label">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历:</label>
                                <select class="form-control" style="width:172px" id="eduLevel" onblur="Verify('eduLevel', 0, '请选择有效学历')">
                                    <option>请选择学历</option>
                                    <option>小学</option>
                                    <option>初中</option>
                                    <option>高中</option>
                                    <option>本科</option>
                                    <option>硕士</option>
                                    <option>博士</option>
                                </select>
                                <small id="eduLevelHelper" style="margin-left:65px;margin-bottom:0px;" class="help-block">&nbsp;</small>
                            </div>
                            <div class="form-group" id="div_job" style="margin-top:20px;">
                                <label for="job" class="control-label">职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位:</label>
                                <input type="text" class="form-control" id="job" onblur="Verify('job', 20, '长度不得超过20个字符')">
                                <small id="jobHelper" style="margin-left:65px;margin-bottom:0px;" class="help-block">&nbsp;</small>
                            </div>
                            <div class="form-group" id="div_telephoneCode" style="margin-left:35px;margin-top:20px;">
                                <label for="telephoneCode" class="control-label">联系方式:</label>
                                <input type="text" class="form-control" id="telephoneCode" onblur="Verify('telephoneCode', 13, '长度不得超过13个字符')">
                                <small id="telephoneCodeHelper" style="margin-left:65px;margin-bottom:0px;" class="help-block">&nbsp;</small>
                            </div>
                            <div class="form-group" id="div_joinDate" style="margin-left:0px;margin-top:20px;">
                                <label for="joinDate" class="control-label">入职日期:</label>
                                <div class="input-group" style="width:170px;">
                                    <input type="text" class="form-control form_datetime" id="joinDate" onblur="Verify('joinDate', 0, '日期不能为空')">
                                    <span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-time" aria-hidden="true"></span></span>
                                </div>
                                <small id="joinDateHelper" style="margin-left:65px;margin-bottom:0px;" class="help-block">&nbsp;</small>
                            </div>
                            <input type="hidden" class="form-control" id="ID">
                        </form>
                        <div class="form-group" id="div_remark" style="margin-left:0px;margin-top:20px;margin-right:35px;">
                            <label for="remark" class="control-label">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</label>
                            <textarea class="form-control" id="remark" rows="2" onblur="Verify('remark', 500, '长度不得超过500个字符')"></textarea>
                            <small id="remarkHelper" style="margin-left:0px;margin-bottom:0px;" class="help-block">&nbsp;</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 关闭</button>
                    <button type="button" id="btn-Option" class="btn btn-primary"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal(消息提示框) -->
    <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm" style="width:300px;" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#286090;height:40px;">
                    <h4 class="modal-title" style="position:absolute;top:10px;left:10px;color:white;"><span class="glyphicon glyphicon-info-sign" aria-hidden="true" style="color:white;"></span> 提示</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <p id="message" style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;font-size:medium"></p>
                </div>
                <div class="modal-footer" style="height:40px;">
                    <button type="button" class="btn btn-primary" style="position:absolute;right:10px;bottom:3px;" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal(提示是否确认)-->
    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm" style="width:300px;" role="document">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#286090;height:40px;">
                    <h4 class="modal-title" style="position:absolute;top:10px;left:10px;color:white;">提示</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <p id="message" style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;font-size:medium"></p>
                </div>
                <div class="modal-footer" style="height:40px;">
                    <button type="button" data-dismiss="modal" class="btn btn-default" style="position:absolute;right:75px;bottom:3px;"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 否</button>
                    <button type="button" id="btn-yes" class="btn btn-primary" style="position:absolute;right:10px;bottom:3px;"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 是</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
